<template>
    <div class="detail-buttons" :class="{ 'is-helper-active': isHelperActive }">
        <el-button v-if="!compact" class="el-icon-back" type="primary" size="small" @click="handleReturn">
            {{ $t('lang.return') }}
        </el-button>
        <el-button
            v-if="!readonly"
            ref="submitBtn"
            class="el-icon-upload"
            type="primary"
            size="small"
            @click="handleSubmit"
        >
            {{ $t('lang.submit') }}
        </el-button>
    </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import * as enums from '../../store/status-enums.js';
import bus from '../../utils/Eventbus.js';

export default {
    name: 'p-detail-buttons',
    components: {},
    props: {
        compact: Boolean,
        readonly: Boolean,
        submitFunc: Function
    },
    data () {
        return {
        };
    },
    computed: {
        ...mapState({
            floaterTag: state => state.app.floaterOpened,
            isHelperActive: state => state.businessStatus.isHelperActive
        })
    },
    watch: {},
    mounted() {
        this.init();
    },
    methods: {
        init() {},
        handleReturn() {
            if (this.floaterTag) this.$store.commit(enums.CLOSE_FLOATER);
            else this.$router.go(-1);
        },
        handleSubmit(e) {
            if (typeof this.submitFunc === 'function') {
                this.submitFunc(e).then(() => {
                    if (!this.compact) {
                        this.handleReturn();
                        bus.emit('p-table.init');
                    }
                }).catch(() => {
                    // console.error('error: ', e);
                    return;
                });
            }
        }
    }
};
</script>

<style lang="scss">
.p-model-detail-form {
}
</style>
